<script setup lang="tsx">
import VFromDesigner from '@/components/variant-form3/form-designer/index.vue'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Icon } from '@/components/Icon'
import { useRoute } from 'vue-router'
import { selectFormDetail, saveOrUpdateForm } from '@/api/sysGenForm'
import { selectModelById } from '@/api/generate'
const { query } = useRoute()

const tableName = ref(query.tableName)
const modelId = ref(query.modelId)
const formName = ref(query.formName)
const formId = ref(query.formId)
const vfDesigner = ref(null)
const testBanned = ref([
  //'sub-form',
  //'alert',
])
const test = ref({
  widgetList: [
    {
      type: 'static-text',
      icon: 'static-text',
      formItemFlag: false,
      options: {
        name: 'statictext111193',
        columnWidth: '200px',
        hidden: false,
        textContent: '单列表单',
        customClass: [],
        onCreated: '',
        onMounted: '',
        label: 'static-text'
      },
      id: 'statictext111193'
    },
    {
      type: 'divider',
      icon: 'divider',
      formItemFlag: false,
      options: {
        name: 'divider102346',
        label: '',
        columnWidth: '200px',
        direction: 'horizontal',
        contentPosition: 'center',
        hidden: false,
        customClass: [],
        onCreated: '',
        onMounted: ''
      },
      id: 'divider102346'
    },
    {
      type: 'input',
      icon: 'text-field',
      formItemFlag: true,
      options: {
        name: 'input12931',
        label: '发件人姓名',
        labelAlign: '',
        type: 'text',
        defaultValue: '',
        placeholder: '',
        columnWidth: '200px',
        size: '',
        labelWidth: null,
        labelHidden: false,
        readonly: false,
        disabled: false,
        hidden: false,
        clearable: true,
        showPassword: false,
        required: true,
        validation: '',
        validationHint: '',
        customClass: [],
        labelIconClass: null,
        labelIconPosition: 'rear',
        labelTooltip: null,
        minLength: null,
        maxLength: null,
        showWordLimit: false,
        prefixIcon: '',
        suffixIcon: '',
        appendButton: false,
        appendButtonDisabled: false,
        buttonIcon: 'el-icon-search',
        onCreated: '',
        onMounted: '',
        onInput: '',
        onChange: '',
        onFocus: '',
        onBlur: '',
        onValidate: ''
      },
      id: 'input12931'
    },
    {
      type: 'switch',
      icon: 'switch-field',
      formItemFlag: true,
      options: {
        name: 'switch96070',
        label: '是否保密',
        labelAlign: '',
        defaultValue: true,
        columnWidth: '200px',
        labelWidth: null,
        labelHidden: false,
        disabled: false,
        hidden: false,
        customClass: '',
        labelIconClass: null,
        labelIconPosition: 'rear',
        labelTooltip: null,
        switchWidth: 40,
        activeText: '',
        inactiveText: '',
        activeColor: null,
        inactiveColor: null,
        onCreated: '',
        onMounted: '',
        onChange: '',
        onValidate: ''
      },
      id: 'switch96070'
    },
    {
      type: 'input',
      icon: 'text-field',
      formItemFlag: true,
      options: {
        name: 'input23031',
        label: '发件人号码',
        labelAlign: '',
        type: 'text',
        defaultValue: '',
        placeholder: '',
        columnWidth: '200px',
        size: '',
        labelWidth: null,
        labelHidden: false,
        readonly: false,
        disabled: false,
        hidden: false,
        clearable: true,
        showPassword: false,
        required: true,
        validation: '',
        validationHint: '',
        customClass: '',
        labelIconClass: null,
        labelIconPosition: 'rear',
        labelTooltip: null,
        minLength: null,
        maxLength: null,
        showWordLimit: false,
        prefixIcon: '',
        suffixIcon: '',
        appendButton: false,
        appendButtonDisabled: false,
        buttonIcon: 'el-icon-search',
        onCreated: '',
        onMounted: '',
        onInput: '',
        onChange: '',
        onFocus: '',
        onBlur: '',
        onValidate: ''
      },
      id: 'input23031'
    },
    {
      type: 'textarea',
      icon: 'textarea-field',
      formItemFlag: true,
      options: {
        name: 'textarea21654',
        label: '发件人地址',
        labelAlign: '',
        rows: 3,
        defaultValue: '',
        placeholder: '',
        columnWidth: '200px',
        size: '',
        labelWidth: null,
        labelHidden: false,
        readonly: false,
        disabled: false,
        hidden: false,
        required: true,
        validation: '',
        validationHint: '',
        customClass: '',
        labelIconClass: null,
        labelIconPosition: 'rear',
        labelTooltip: null,
        minLength: null,
        maxLength: null,
        showWordLimit: false,
        onCreated: '',
        onMounted: '',
        onInput: '',
        onChange: '',
        onFocus: '',
        onBlur: '',
        onValidate: ''
      },
      id: 'textarea21654'
    },
    {
      type: 'divider',
      icon: 'divider',
      formItemFlag: false,
      options: {
        name: 'divider69240',
        label: '',
        columnWidth: '200px',
        direction: 'horizontal',
        contentPosition: 'center',
        hidden: false,
        customClass: '',
        onCreated: '',
        onMounted: ''
      },
      id: 'divider69240'
    },
    {
      type: 'input',
      icon: 'text-field',
      formItemFlag: true,
      options: {
        name: 'input113152',
        label: '收件人姓名',
        labelAlign: '',
        type: 'text',
        defaultValue: '',
        placeholder: '',
        columnWidth: '200px',
        size: '',
        labelWidth: null,
        labelHidden: false,
        readonly: false,
        disabled: false,
        hidden: false,
        clearable: true,
        showPassword: false,
        required: true,
        validation: '',
        validationHint: '',
        customClass: [],
        labelIconClass: null,
        labelIconPosition: 'rear',
        labelTooltip: null,
        minLength: null,
        maxLength: null,
        showWordLimit: false,
        prefixIcon: '',
        suffixIcon: '',
        appendButton: false,
        appendButtonDisabled: false,
        buttonIcon: 'el-icon-search',
        onCreated: '',
        onMounted: '',
        onInput: '',
        onChange: '',
        onFocus: '',
        onBlur: '',
        onValidate: ''
      },
      id: 'input113152'
    },
    {
      type: 'checkbox',
      icon: 'checkbox-field',
      formItemFlag: true,
      options: {
        name: 'checkbox63174',
        label: '接收时间段',
        labelAlign: '',
        defaultValue: [],
        columnWidth: '200px',
        size: '',
        displayStyle: 'inline',
        buttonStyle: false,
        border: false,
        labelWidth: null,
        labelHidden: false,
        disabled: false,
        hidden: false,
        optionItems: [
          {
            label: '上午9:00 - 11:30',
            value: 1
          },
          {
            label: '下午12:30 - 18:00',
            value: 2
          },
          {
            label: '晚上18:00 - 21:00',
            value: 3
          }
        ],
        required: true,
        validation: '',
        validationHint: '',
        customClass: '',
        labelIconClass: null,
        labelIconPosition: 'rear',
        labelTooltip: null,
        onCreated: '',
        onMounted: '',
        onChange: '',
        onValidate: ''
      },
      id: 'checkbox63174'
    },
    {
      type: 'input',
      icon: 'text-field',
      formItemFlag: true,
      options: {
        name: 'input40240',
        label: '收件人号码',
        labelAlign: '',
        type: 'text',
        defaultValue: '',
        placeholder: '',
        columnWidth: '200px',
        size: '',
        labelWidth: null,
        labelHidden: false,
        readonly: false,
        disabled: false,
        hidden: false,
        clearable: true,
        showPassword: false,
        required: true,
        validation: '',
        validationHint: '',
        customClass: '',
        labelIconClass: null,
        labelIconPosition: 'rear',
        labelTooltip: null,
        minLength: null,
        maxLength: null,
        showWordLimit: false,
        prefixIcon: '',
        suffixIcon: '',
        appendButton: false,
        appendButtonDisabled: false,
        buttonIcon: 'el-icon-search',
        onCreated: '',
        onMounted: '',
        onInput: '',
        onChange: '',
        onFocus: '',
        onBlur: '',
        onValidate: ''
      },
      id: 'input40240'
    },
    {
      type: 'input',
      icon: 'text-field',
      formItemFlag: true,
      options: {
        name: 'input78584',
        label: '收件人地址',
        labelAlign: '',
        type: 'text',
        defaultValue: '',
        placeholder: '',
        columnWidth: '200px',
        size: '',
        labelWidth: null,
        labelHidden: false,
        readonly: false,
        disabled: false,
        hidden: false,
        clearable: true,
        showPassword: false,
        required: true,
        validation: '',
        validationHint: '',
        customClass: '',
        labelIconClass: null,
        labelIconPosition: 'rear',
        labelTooltip: null,
        minLength: null,
        maxLength: null,
        showWordLimit: false,
        prefixIcon: '',
        suffixIcon: '',
        appendButton: false,
        appendButtonDisabled: false,
        buttonIcon: 'el-icon-search',
        onCreated: '',
        onMounted: '',
        onInput: '',
        onChange: '',
        onFocus: '',
        onBlur: '',
        onValidate: ''
      },
      id: 'input78584'
    },
    {
      type: 'divider',
      icon: 'divider',
      formItemFlag: false,
      options: {
        name: 'divider75887',
        label: '',
        columnWidth: '200px',
        direction: 'horizontal',
        contentPosition: 'center',
        hidden: false,
        customClass: [],
        onCreated: '',
        onMounted: ''
      },
      id: 'divider75887'
    },
    {
      type: 'time-range',
      icon: 'time-range-field',
      formItemFlag: true,
      options: {
        name: 'timerange47503',
        label: '送货时间',
        labelAlign: '',
        defaultValue: null,
        startPlaceholder: '',
        endPlaceholder: '',
        columnWidth: '200px',
        size: '',
        labelWidth: null,
        labelHidden: false,
        readonly: false,
        disabled: false,
        hidden: false,
        clearable: true,
        editable: false,
        format: 'HH:mm:ss',
        required: true,
        validation: '',
        validationHint: '',
        customClass: '',
        labelIconClass: null,
        labelIconPosition: 'rear',
        labelTooltip: null,
        onCreated: '',
        onMounted: '',
        onChange: '',
        onFocus: '',
        onBlur: '',
        onValidate: ''
      },
      id: 'timerange47503'
    },
    {
      type: 'slider',
      icon: 'slider-field',
      formItemFlag: true,
      options: {
        name: 'slider54714',
        label: '价格保护',
        labelAlign: '',
        columnWidth: '200px',
        size: '',
        labelWidth: null,
        labelHidden: false,
        disabled: false,
        hidden: false,
        required: false,
        validation: '',
        validationHint: '',
        customClass: [],
        labelIconClass: null,
        labelIconPosition: 'rear',
        labelTooltip: null,
        min: 0,
        max: 100,
        step: 10,
        range: false,
        height: null,
        onCreated: '',
        onMounted: '',
        onChange: '',
        onValidate: '',
        showStops: true
      },
      id: 'slider54714'
    },
    {
      type: 'textarea',
      icon: 'textarea-field',
      formItemFlag: true,
      options: {
        name: 'textarea64794',
        label: '其他信息',
        labelAlign: '',
        rows: 3,
        defaultValue: '',
        placeholder: '',
        columnWidth: '200px',
        size: '',
        labelWidth: null,
        labelHidden: false,
        readonly: false,
        disabled: false,
        hidden: false,
        required: false,
        validation: '',
        validationHint: '',
        customClass: '',
        labelIconClass: null,
        labelIconPosition: 'rear',
        labelTooltip: null,
        minLength: null,
        maxLength: null,
        showWordLimit: false,
        onCreated: '',
        onMounted: '',
        onInput: '',
        onChange: '',
        onFocus: '',
        onBlur: '',
        onValidate: ''
      },
      id: 'textarea64794'
    }
  ],
  formConfig: {
    modelName: 'formData',
    refName: 'vForm',
    rulesName: 'rules',
    labelWidth: 150,
    labelPosition: 'left',
    size: '',
    labelAlign: 'label-right-align',
    cssCode: '',
    customClass: [],
    functions: '',
    layoutType: 'PC',
    jsonVersion: 3,
    onFormCreated: '',
    onFormMounted: '',
    onFormDataChange: '',
    dataSources: [
      {
        dataSourceId: 'ds14042',
        uniqueName: '12',
        requestURL: '3123',
        requestURLType: 'String',
        requestMethod: 'get',
        description: '123',
        headers: [],
        params: [],
        data: [],
        configHandlerCode: '  return config',
        dataHandlerCode: '  return result.data.data;',
        errorHandlerCode: '  $message.error(error.message);',
        dataSetEnabled: false,
        dataSets: []
      }
    ],
    onFormValidate: ''
  }
})
const designerConfig = reactive({
  languageMenu: true,
  externalLink: true,
  resetFormJson: true,
  toolbarMaxWidth: 500
  //externalLink: false,
  //formTemplates: false,
  //eventCollapse: false,
  //clearDesignerButton: false,
  //previewFormButton: false,

  //presetCssCode: '.abc { font-size: 16px; }',
})

onMounted(() => {
  init()
})

const init = async () => {
  console.log('modelId', modelId.value)
  if (formId.value) {
    //修改或查看逻辑
    const res = await selectFormDetail({ formConfig: { id: formId.value } })
    if (res.success && vfDesigner.value) {
      vfDesigner.value.setFormJson(res.result)
    }
  } else {
    //新增逻辑
    let formJson = vfDesigner.value.getFormJson()
    if (modelId.value) {
      const res = await selectModelById(modelId.value)
      if (res.success) {
        tableName.value = res.result.tableName
        formJson.formConfig.modelName = res.result.tableName
        if (formName.value) {
          formJson.formConfig.formName = formName.value
        }
        console.log('formJson', formJson)
        vfDesigner.value.setFormJson(formJson)
      }
    }
  }
  // if (formId.value) {
  //   const res = await selectFormDetail({ formConfig: { id: formId.value } })
  //   console.log('res.success', res.success)
  //   if (res.success && vfDesigner.value) {
  //     // vfDesigner.value.setFormJson(res.result)
  //     console.log('res.result', res.result)
  //     let formJson = vfDesigner.value.getFormJson()
  //     vfDesigner.value.setFormJson(res.result)
  //     console.log('formJson', formJson)
  //   }
  // } else {
  //   if (vfDesigner.value && tableName.value) {
  //     let formJson = vfDesigner.value.getFormJson()
  //     formJson.formConfig.modelName = tableName.value
  //     vfDesigner.value.setFormJson(formJson)
  //   }
  // }
}
const saveFormJson = async () => {
  let formJson = vfDesigner.value.getFormJson()
  await saveOrUpdateForm(formJson)
  ElMessage.success('表单已保存！')
}
</script>
<template>
  <VFromDesigner
    ref="vfDesigner"
    :modelId="modelId"
    :formName="formName"
    :banned-widgets="testBanned"
    :designer-config="designerConfig"
  >
    <!-- 自定义按钮插槽演示 -->
    <template #customToolButtons>
      <el-button link type="primary" @click="saveFormJson"
        ><Icon icon="uil:save" style="color: #409eff" />保存</el-button
      >
    </template>
  </VFromDesigner>
</template>
<style>
html {
  height: 100%;
  box-sizing: border-box;
}

body {
  height: 100%;
  margin: 0; /*  */
  background-color: #ffffff;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family:
    Helvetica Neue,
    Helvetica,
    PingFang SC,
    Hiragino Sans GB,
    Microsoft YaHei,
    Arial,
    sans-serif;
}
</style>
